<template>
  <a-list :bordered="false">
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.password') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              {{ $t('userSetting.SecuritySettings.placeholder.password') }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="clickPasswordOpen">
              {{ $t('userSetting.SecuritySettings.button.update') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <!-- <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.securityQuestion') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph class="tip">
              {{
                $t('userSetting.SecuritySettings.placeholder.securityQuestion')
              }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.settings') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.phone') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              已绑定：123******99
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.update') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.email') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph class="tip">
              {{ $t('userSetting.SecuritySettings.placeholder.email') }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.update') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item> -->
  </a-list>
  <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      密码修改
    </template>
    <div class="center-div">
      <a-space direction="vertical" size="large">
        <a-input :style="{ width: '400px' }" placeholder="Please old password" allow-clear v-model="oldPaasowrd">
          <template #prepend>
            旧密码
          </template>
        </a-input>
        <a-input :style="{ width: '400px' }" placeholder="Please new password" allow-clear v-model="newPassword1">
          <template #prepend>
            新密码
          </template>
        </a-input>
        <a-input :style="{ width: '400px' }" placeholder="Please to new password" allow-clear v-model="newPassword2">
          <template #prepend>
            新密码
          </template>
        </a-input>
      </a-space>

    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { updatePssword } from '@/api/sys/user'
const visible = ref(false)
const { proxy } = getCurrentInstance()
import { Message } from '@arco-design/web-vue';
const oldPaasowrd = ref()
const newPassword1 = ref()
const newPassword2 = ref()
const handleOk = () => {
  if(!oldPaasowrd.value){
    visible.value = true
    Message.info('请输入旧密码')
    return
  }
  //验证 两遍新密码是否一致
  console.log(newPassword2, newPassword1)
  if (newPassword2.value != newPassword1.value) {
    Message.info('检查两遍新密码是否一致')
    return
  }

  updatePssword(oldPaasowrd.value, newPassword1.value).then(res => {
    if (res.data.success) {
      Message.success("密码修改成功")
      visible.value = false
    } else {
      Message.info('旧密码错误请重新输入！')
      visible.value = true
    }
    oldPaasowrd.value = ''
    newPassword1.value = ''
    newPassword2.value = ''
  })
}
const handleCancel = () => {
  visible.value = false
}

const clickPasswordOpen = () => {
  console.log("点击了");

  visible.value = true
}
</script>

<style scoped lang="less">
:deep(.arco-list-item) {
  border-bottom: none !important;

  .arco-typography {
    margin-bottom: 20px;
  }

  .arco-list-item-meta-avatar {
    margin-bottom: 1px;
  }

  .arco-list-item-meta {
    padding: 0;
  }
}

:deep(.arco-list-item-meta-content) {
  flex: 1;
  border-bottom: 1px solid var(--color-neutral-3);

  .arco-list-item-meta-description {
    display: flex;
    flex-flow: row;
    justify-content: space-between;

    .tip {
      color: rgb(var(--gray-6));
    }

    .operation {
      margin-right: 6px;
    }
  }
}
.center-div{
   display: flex;
   justify-content: center;
   align-items: center;
}
</style>
